<template>
  <!-- 引导页 -->
  <div class="guidePage">
    <HomePage1 v-if="id === 1" class="sysId1" />
    <HomePage2 v-if="id === 2" class="sysId2" />
    <HomePage3 v-if="id === 3" class="sysId3" />
    <HomePage4 v-if="id === 4" class="sysId4" />
    <HomePage5 v-if="id === 5" class="sysId5" />
    <HomePage6 v-if="id === 6" class="sysId6" />
    <HomePage7 v-if="id === 7" class="sysId7" />
    <HomePage8 v-if="id === 8" class="sysId8" />
    <HomePage9 v-if="id === 9" class="sysId9" />
    <HomePage10 v-if="id === 10" class="sysId10" />
  </div>
</template>

<script>

import HomePage1 from './homePage1/index'
import HomePage2 from './homePage2/index'
import HomePage3 from './homePage3/index'
import HomePage4 from './homePage4/index'
import HomePage5 from './homePage5/index'
import HomePage6 from './homePage6/index'
import HomePage7 from './homePage7/index'
import HomePage8 from './homePage8/index'
import HomePage9 from './homePage9/index'
import HomePage10 from './homePage10/index'
import { mapGetters } from 'vuex'
import storage from '@/utils/storage'

export default {
  name: 'GuidePage',
  components: {
    HomePage1,
    HomePage2,
    HomePage3,
    HomePage4,
    HomePage5,
    HomePage6,
    HomePage7,
    HomePage8,
    HomePage9,
    HomePage10 },
  data() {
    return {
      id: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.id1 = JSON.parse(storage.get('id'))
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/guidePage' }))
    this.getSysId()
  },
  methods: {
    getSysId() {
      this.id = this.id1
    }
  }
}
</script>

<style lang="scss" scoped>
.platform {
  margin: 30px 20px;
}
.platform-title {
  font-size: 60px;
  text-align: center;
}
.moreIcon{
  position: absolute;
  right: 10px;
}
.platform-box {
  width: 1000px;
  margin: 100px auto 0;
  // .platform {
  //   width: 1010px;
  //   display: flex;
  //   justify-content: space-around;
  //   li {
  //     width: 300px;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     border-radius: 5px;
  //     height: 144px;
  //     margin-bottom: 40px;
  //     cursor: pointer;
  //   }
  //   .platform-1 {
  //     background: url('~@/assets/zsj.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-2 {
  //     background: url('~@/assets/wbba.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-3 {
  //     background: url('~@/assets/wbgl.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-4 {
  //     background: url('~@/assets/lbyy.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-5 {
  //     background: url('~@/assets/zhgl.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-6 {
  //     background: url('~@/assets/dsj.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-7 {
  //     background: url('~@/assets/wlw.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-8 {
  //     background: url('~@/assets/zhxq.jpg') no-repeat;
  //     background-size: 300px 144px;
  //   }
  //   .platform-9 {
  //     background: url('~@/assets/ydpt.png') no-repeat;
  //     background-size: 300px 144px;
  //   }
  // }
}

.caozuoWrap{
  width: 100%;
}
.treeCon{
  width: 200px;
}
.moreOperate{
  position: absolute;
  right: 10px;
  z-index: 66;
  background-color: #fff;
}
</style>
